<template>
  <div class="learner-profile-page">
    <!-- 基本信息卡片 -->
    <el-card class="basic-info">
      <div class="profile-header">
        <div class="user-info">
          <el-avatar :size="80" :src="profile.avatar" />
          <div class="info-text">
            <h1>{{ profile.name }}</h1>
            <div class="tags">
              <el-tag>{{ profile.grade }}</el-tag>
              <el-tag type="success">{{ profile.learningStyle }}</el-tag>
              <el-tag type="warning">学习时长 {{ profile.totalStudyHours }}h</el-tag>
            </div>
          </div>
        </div>
        <div class="actions">
          <el-button type="primary" @click="updateProfile">更新画像</el-button>
          <el-button @click="exportProfile">导出数据</el-button>
        </div>
      </div>
    </el-card>

    <!-- 详细特征分析 -->
    <el-row :gutter="20" class="feature-analysis">
      <!-- 认知特征 -->
      <el-col :span="8">
        <el-card class="feature-card">
          <template #header>
            <h3>认知特征分析</h3>
          </template>
          <div class="cognitive-features">
            <div class="feature-item">
              <h4>学习风格</h4>
              <el-progress
                v-for="style in profile.learningStyles"
                :key="style.type"
                :percentage="style.value"
                :format="val => `${style.name}: ${val}%`"
                :color="style.color"
              />
            </div>
            <div class="feature-item">
              <h4>认知能力</h4>
              <v-chart :option="cognitiveOption" autoresize style="height: 300px;" />
            </div>
          </div>
        </el-card>
      </el-col>

      <!-- 行为特征 -->
      <el-col :span="8">
        <el-card class="feature-card">
          <template #header>
            <h3>学习行为特征</h3>
          </template>
          <div class="behavior-features">
            <div class="feature-item">
              <h4>学习时间分布</h4>
              <v-chart :option="timeDistOption" autoresize style="height: 200px;" />
            </div>
            <div class="feature-item">
              <h4>学习习惯评估</h4>
              <div class="habit-metrics">
                <div class="metric-item">
                  <span class="label">学习规律性</span>
                  <el-rate v-model="profile.regularity" disabled show-score />
                </div>
                <div class="metric-item">
                  <span class="label">专注度</span>
                  <el-progress :percentage="profile.concentration" status="success" />
                </div>
                <div class="metric-item">
                  <span class="label">任务完成率</span>
                  <el-progress :percentage="profile.taskCompletion" status="warning" />
                </div>
              </div>
            </div>
            <div class="feature-item">
              <h4>学习偏好</h4>
              <el-tag 
                v-for="pref in profile.preferences" 
                :key="pref.type"
                :type="pref.type"
                class="preference-tag"
              >
                {{ pref.name }}
              </el-tag>
            </div>
          </div>
        </el-card>
      </el-col>

      <!-- 知识特征 -->
      <el-col :span="8">
        <el-card class="feature-card">
          <template #header>
            <h3>知识结构特征</h3>
          </template>
          <div class="knowledge-features">
            <div class="feature-item">
              <h4>知识掌握分布</h4>
              <v-chart :option="knowledgeOption" autoresize style="height: 300px;" />
            </div>
            <div class="feature-item">
              <h4>知识关联度</h4>
              <div class="connection-analysis">
                <el-progress
                  type="dashboard"
                  :percentage="profile.knowledgeConnection"
                  :color="connectionColors"
                />
                <div class="connection-details">
                  <p>知识点关联强度: {{ profile.connectionStrength }}</p>
                  <p>跨学科关联: {{ profile.crossDisciplinary }}</p>
                </div>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 学习表现分析 -->
    <el-card class="performance-analysis">
      <template #header>
        <div class="section-header">
          <h3>学习表现分析</h3>
          <el-radio-group v-model="timeRange" size="small">
            <el-radio-button label="week">周</el-radio-button>
            <el-radio-button label="month">月</el-radio-button>
            <el-radio-button label="semester">学期</el-radio-button>
          </el-radio-group>
        </div>
      </template>
      <el-row :gutter="20">
        <el-col :span="16">
          <div class="performance-trends">
            <v-chart :option="performanceOption" autoresize style="height: 350px;" />
          </div>
        </el-col>
        <el-col :span="8">
          <div class="performance-stats">
            <div class="stat-card" v-for="stat in performanceStats" :key="stat.name">
              <div class="stat-info">
                <span class="stat-name">{{ stat.name }}</span>
                <span class="stat-value">{{ stat.value }}</span>
              </div>
              <div class="stat-trend">
                <el-tag :type="stat.trend > 0 ? 'success' : 'danger'" size="small">
                  {{ stat.trend > 0 ? '↑' : '↓' }} {{ Math.abs(stat.trend) }}%
                </el-tag>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
    </el-card>

    <!-- 个性化建议 -->
    <el-card class="recommendations">
      <template #header>
        <h3>个性化学习建议</h3>
      </template>
      <el-timeline>
        <el-timeline-item
          v-for="rec in recommendations"
          :key="rec.id"
          :type="rec.type"
          :color="rec.color"
          :timestamp="rec.timestamp"
        >
          <h4>{{ rec.title }}</h4>
          <p>{{ rec.content }}</p>
          <div class="recommendation-actions" v-if="rec.actions">
            <el-button 
              v-for="action in rec.actions"
              :key="action.id"
              :type="action.type"
              size="small"
              @click="handleAction(action)"
            >
              {{ action.name }}
            </el-button>
          </div>
        </el-timeline-item>
      </el-timeline>
    </el-card>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import { RadarChart, LineChart, PieChart } from 'echarts/charts'
import { GridComponent, TooltipComponent, LegendComponent } from 'echarts/components'
import VChart from 'vue-echarts'

// 注册必要的组件
use([
  CanvasRenderer,
  RadarChart,
  LineChart,
  PieChart,
  GridComponent,
  TooltipComponent,
  LegendComponent
])

// 学习者画像数据
const profile = ref({
  name: '张三',
  avatar: 'https://example.com/avatar.jpg',
  grade: '大三',
  learningStyle: '视觉型学习者',
  totalStudyHours: 156,
  learningStyles: [
    { type: 'visual', name: '视觉学习', value: 75, color: '#409EFF' },
    { type: 'auditory', name: '听觉学习', value: 45, color: '#67C23A' },
    { type: 'kinetic', name: '实践学习', value: 60, color: '#E6A23C' }
  ],
  regularity: 4,
  concentration: 85,
  taskCompletion: 78,
  knowledgeConnection: 82,
  connectionStrength: '较强',
  crossDisciplinary: '良好',
  preferences: [
    { type: 'success', name: '视频学习' },
    { type: 'warning', name: '实践操作' },
    { type: 'info', name: '小组讨论' }
  ]
})

// 认知能力雷达图配置
const cognitiveOption = ref({
  radar: {
    indicator: [
      { name: '理解能力', max: 100 },
      { name: '记忆能力', max: 100 },
      { name: '分析能力', max: 100 },
      { name: '应用能力', max: 100 },
      { name: '创新能力', max: 100 }
    ]
  },
  series: [{
    type: 'radar',
    data: [{
      value: [85, 70, 75, 80, 65],
      name: '能力分布',
      areaStyle: {
        color: 'rgba(64,158,255,0.2)'
      }
    }]
  }]
})

// 学习时间分布图配置
const timeDistOption = ref({
  tooltip: {
    trigger: 'item'
  },
  series: [{
    type: 'pie',
    radius: ['40%', '70%'],
    data: [
      { value: 40, name: '上午' },
      { value: 30, name: '下午' },
      { value: 30, name: '晚上' }
    ]
  }]
})

// 知识掌握分布图配置
const knowledgeOption = ref({
  series: [{
    type: 'pie',
    radius: '60%',
    data: [
      { value: 35, name: '已掌握' },
      { value: 45, name: '正在学习' },
      { value: 20, name: '待学习' }
    ]
  }]
})

// 学习表现分析相关
const timeRange = ref('week')
const performanceOption = ref({
  tooltip: {
    trigger: 'axis'
  },
  xAxis: {
    type: 'category',
    data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      name: '学习时长',
      type: 'line',
      smooth: true,
      data: [3, 4, 3.5, 5, 4, 6, 4]
    },
    {
      name: '完成任务数',
      type: 'line',
      smooth: true,
      data: [5, 6, 4, 7, 5, 8, 6]
    }
  ]
})

// 性能统计数据
const performanceStats = ref([
  { name: '平均学习时长', value: '4.2h/天', trend: 15 },
  { name: '知识点掌握率', value: '78%', trend: 8 },
  { name: '练习完成率', value: '85%', trend: -3 }
])

// 个性化建议数据
const recommendations = ref([
  {
    id: 1,
    title: '加强算法练习',
    content: '建议增加算法相关练习，提高问题解决能力',
    type: 'primary',
    color: '#409EFF',
    timestamp: '2024-01-20',
    actions: [
      { id: 1, name: '查看推荐题目', type: 'primary' },
      { id: 2, name: '制定练习计划', type: 'info' }
    ]
  },
  {
    id: 2,
    title: '调整学习时间',
    content: '建议将部分学习时间调整到上午，提高学习效率',
    type: 'warning',
    color: '#E6A23C',
    timestamp: '2024-01-19'
  }
])

// 仪表盘颜色配置
const connectionColors = [
  { color: '#f56c6c', percentage: 20 },
  { color: '#e6a23c', percentage: 40 },
  { color: '#5cb87a', percentage: 60 },
  { color: '#1989fa', percentage: 80 },
  { color: '#409eff', percentage: 100 }
]

// 方法定义
const updateProfile = async () => {
  try {
    // 调用API更新学习者画像
    console.log('更新学习者画像')
  } catch (error) {
    console.error('更新失败:', error)
  }
}

const exportProfile = () => {
  // 导出学习者画像数据
  console.log('导出数据')
}

const handleAction = (action) => {
  console.log('执行操作:', action.name)
}
</script>

<style scoped>
.learner-profile-page {
  padding: 20px;
}

.basic-info {
  margin-bottom: 20px;
}

.profile-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 20px;
}

.info-text h1 {
  margin: 0 0 10px 0;
}

.tags {
  display: flex;
  gap: 10px;
}

.feature-analysis {
  margin-bottom: 20px;
}

.feature-card {
  height: 100%;
}

.feature-item {
  margin-bottom: 20px;
}

.feature-item h4 {
  margin-bottom: 16px;
  color: var(--text-primary);
}

.habit-metrics {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.metric-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.preference-tag {
  margin: 0 8px 8px 0;
}

.connection-analysis {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.connection-details {
  text-align: center;
}

.performance-analysis {
  margin-bottom: 20px;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.performance-stats {
  padding: 16px;
}

.stat-card {
  padding: 16px;
  margin-bottom: 16px;
  background: #f8f9fa;
  border-radius: 8px;
}

.stat-info {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
}

.stat-name {
  color: var(--text-regular);
}

.stat-value {
  font-weight: bold;
  color: var(--text-primary);
}

.recommendations {
  margin-bottom: 20px;
}

.recommendation-actions {
  margin-top: 12px;
  display: flex;
  gap: 8px;
}
</style> 